<template>
  <div class="container">
    <el-divider> i18 </el-divider>
    <div>国际化语言：{{ $t("message.hello") }}</div>
    <el-button @click="toggleLocal">切换语言环境</el-button>

    <el-divider> Svg图标测试 </el-divider>
    <div>
      <SvgIcon icon-class="faxian" />
    </div>

    <el-divider> Vue过滤器的使用 </el-divider>
    <div> {{ 1000000 | toThousandFilter }}</div>

    <el-divider> element 组件 </el-divider>

    <div>
      <el-select v-model="value" placeholder="请选择" />
      <el-date-picker v-model="value1" type="date" placeholder="选择日期">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
import "@/assets/icons/icon-faxian.svg";
import SvgIcon from "@/components/SvgIcon.vue";
export default {
  name: "dashboard",
  components: {
    SvgIcon,
  },
  data() {
    return {
      value1: "",
      value: "",
    };
  },
  methods: {
    toggleLocal() {
      this.$i18n.locale = this.$i18n.locale === "zh" ? "en" : "zh";
    },
  },
};
</script>

<style lang="scss" >
.container {

  .el-divider {
   margin-top: 30px;
 }

}
</style>
<style lang="scss" scoped>
.container {
  height: 100%;
  line-height: 3;
}

</style>
